<template>
    <div style="height: 100%;">
      <el-dialog
        @close="dialogClose()"
        title="标签添加"
        :visible.sync="LabelDialogVisible"
        width="30%"
        center>
        <div style="margin: 0 auto;">
           <p>标签名称:</p>
          <el-input
          placeholder="请输入标签名称"
          v-model="labelName"
          size="medium">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="creatLabel()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        @close="dialogClose()"
        title="标签修改"
        :visible.sync="LabelEditVisible"
        width="30%"
        center>
        <div style="margin: 0 auto;">
           <p>标签名称:</p>
          <el-input
          placeholder="请输入标签名称"
          v-model="labelName"
          size="medium">
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogClose">取 消</el-button>
          <el-button type="primary" @click="EditLabel()">确 定</el-button>
        </span>
      </el-dialog>
      <div id="content">
        <div >
          标签搜索：
          <el-input style="width:55%;" size="medium" v-model="keywords"></el-input>
          <el-button size="medium" icon="el-icon-search" @click="searchResource">搜索</el-button>
          <el-button size="medium" type="primary" icon="el-icon-plus" @click="LabelDialogVisible=true">添加标签</el-button>
        </div>
          <el-table
              :data="showTable"
              style="width:100%;margin-top: 20px;"
              height=100%
              :header-cell-style="{background:'#eef1f6',color:'#606266','text-align':'center'}"
              >
              <el-table-column
                align="center"
                label="标签名">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.labelName }}</span>
                </template>
              </el-table-column>

              <el-table-column
              label="操作"
              width="200"
              align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="resource-page">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="pagesize"
                layout=" prev, pager, next,sizes, jumper"
                :total="filterDataShow.length"
              >
              </el-pagination>
            </div>
      </div>
    </div>
</template>
<script>
 export default {
     data() {
       return {
         tempIndex:'',
         labelName:'',
         LabelDialogVisible: false,
         LabelEditVisible:false,
         filterDataShow: [], //储存符合条件的数据
         keywords:'',
         pagesize: 10,
         currentPage: 1,
         tableData: [],
       }
     },
     mounted() {
      this.searchResource()
      this.getLabels()
     },
     methods: {
       searchResource() {
         this.currentPage = 1; //将当前页设置为1，确保每次都是从第一页开始搜
         let filterKeywords = this.keywords.trim();
         let filerReasource = this.tableData.filter((item) => {
           //过滤全部数据
           if (item.labelName.includes(filterKeywords)) {
             return item;
           }
         });
         this.filterDataShow = filerReasource; //将符合条件的内容赋给filterDataShow
       },
       getLabels(){
        this.$api.Label.getLabels().then((response)=>{
            console.log(response)
            this.tableData=response.data.data
            this.searchResource()
        })
       },
       //修改方法
       handleEdit(index, row) {
         this.tempIndex=index
         this.labelName=row.labelName
         this.LabelEditVisible=true
       },
       EditLabel(){
         if(this.labelName==''){
           this.$message({
             type: 'warning',
             message: '标签名称不能为空!',
             duration: 2000,
             offset:screen.height/2-200,
             center:true,
           })
           return
         }
         this.$api.Label.updateLabel({
            labelId:this.tableData[this.tempIndex].labelId,
            labelName:this.labelName
         }).then((response)=>{
           console.log(response)
           if(response.data.code==200){
             this.$message({
               type: 'success',
               message: '标签修改成功!',
               duration: 2000,
               offset:screen.height/2-200,
               center:true,
             })
           }
           this.dialogClose()
           this.getLabels()
         })
       },
       //删除方法
       handleDelete(index, row) {
          this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                   confirmButtonText: '确定',
                   cancelButtonText: '取消',
                   type: 'warning',
                   center: true
                 }).then(() => {
                   this.$api.Label.deleteLabel({
                      labelId:row.labelId
                   }).then((response)=>{
                     console.log(response)
                     this.getLabels()
                     if(response.data.code==200){
                       this.$message({
                         type: 'success',
                         message: '标签删除成功!',
                         duration: 2000,
                         offset:screen.height/2-200,
                         center:true,
                       })
                     }
                   })
                 }).catch(() => {
                   this.$message({
                     type: 'info',
                     message: '已取消删除'
                   });
                 });

       },
       //创建标签
       creatLabel(){
         if(this.labelName==''){
           this.$message({
             type: 'warning',
             message: '标签名称不能为空!',
             duration: 2000,
             offset:screen.height/2-200,
             center:true,
           })
           return
         }
         this.$api.Label.creatLabel({labelName:this.labelName}).then((response)=>{
           console.log(response)
           if(response.data.code==200){
             this.$message({
               type: 'success',
               message: '标签创建成功!',
               duration: 2000,
               offset:screen.height/2-200,
               center:true,
             })
           }
           this.labelName=''
           this.getLabels()
         })
         this.LabelDialogVisible=false
       },
       //弹窗结束后
       dialogClose(){
        this.LabelDialogVisible=false
        this.LabelEditVisible=false
        this.labelName=''
       },
       handleSizeChange(psize) {
         this.pagesize = psize;
       },
       handleCurrentChange(currentPage) {
         this.currentPage = currentPage;
       },
     },
     computed: {
       //showTable计算属性通过slice方法计算表格当前应显示的数据
       showTable() {
         return this.filterDataShow.slice(
           (this.currentPage - 1) * this.pagesize,
           this.currentPage * this.pagesize
         );
       },
     },
     watch:{
       //监听查询如果为空就显示页面数据
       keywords(){
         if(this.keywords==''){
           this.searchResource()
         }
       }
     }
   }
</script>

<style scoped>
#content{
  width: 700px;
  margin: 0 auto;
  height: 90%;
}

</style>
